<template>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="sum++">点击+1</button>
    <hr>
    <h2>当前鼠标的坐标： x:{{ point.x }} , y:{{ point.y }} </h2>

    <p style="text-align: left;border-top: 1px solid #000;">
      自定义 hook 函数的优点是可以极大地提高相同函数的复用效率；
      <br>
      本示例使用了 hooks/usePoint.ts 中的【获取鼠标坐标】函数
    </p>
</template>

<script lang="ts">
import { ref,reactive } from 'vue'
import usePonit from './hooks/usePoint'

export default {
    name: 'customHook',
    setup() {

        // 数据（响应式）
        let sum = ref(0)

        let point = usePonit()


        return {
            sum,
            point
        }
    },

} 
</script>

<style>

</style>